<template>
	<view>
		<navBar title="支付记录"></navBar>
		<view class="top-bg"></view>
		<view class="content">
			<view class="tab">
				<view class="tab-item" :class="{'active':recordType===0}" @click="handleTab(0)">
					<view>室内停车</view>
					<view class="line"></view>
				</view>
				<view class="tab-item" :class="{'active':recordType===1}" @click="handleTab(1)">
					<view>路侧停车</view>
					<view class="line"></view>
				</view>
				<view class="tab-item" :class="{'active':recordType===2}" @click="handleTab(2)">
					<view>月卡</view>
					<view class="line"></view>
				</view>
			</view>
			<view v-show="recordType===0">
				<view v-if="orderList.length">
					<view class="pay-record" v-for="item in orderList" :key="item.id">
						<view class="pay-record-title">
							<text class="order-num">订单编号：{{item.orderId || ''}}</text>
							<text class="status">{{item.statusStr || ''}}</text>
						</view>
						<view class="info">
							<view class="line">车场名称：{{item.parkName || ''}}</view>
							<view class="line">驶入时间：{{item.enterTime || ''}}</view>
							<view class="line">支付时间：{{item.payTime || ''}}</view>
						</view>
						<view class="footer">
							<text><text class="small">已付：</text>{{item.actualAmount || 0}}元</text>
							<view class="more" @click="go('/pages/indoor/trnDetail',item,1)">查看详情</view>
						</view>
					</view>
				</view>
				<view class="page-result" v-else>
					<image class="page-result-icon" :src="bg_image.emptyData"></image>
					<view class="page-result-msg">暂无数据</view>
				</view>
				<uni-load-more v-if="orderList.length" :status="orderStatus" :content-text="orderContentText"
					@clickLoadMore="clickOrderLoadMore" />
			</view>
			<view v-show="recordType===1">
				<view v-if="outdoorOrderList.length">
					<view class="pay-record" v-for="item in outdoorOrderList" :key="item.id">
						<view class="pay-record-title">
							<text class="order-num">订单编号：{{item.orderId || ''}}</text>
							<text class="status">{{item.statusStr || ''}}</text>
						</view>
						<view class="info">
							<view class="line">泊位编号：{{item.placeNum || ''}}</view>
							<view class="line">驶入时间：{{item.enterTime || ''}}</view>
							<view class="line">支付时间：{{item.payTime || ''}}</view>
						</view>
						<view class="footer">
							<text><text class="small">已付：</text>{{item.actualAmount}}元</text>
							<view class="more" @click="go('/pages/indoor/trnDetail',item,2)">查看详情</view>
						</view>
					</view>
				</view>
				<view class="page-result" v-else>
					<image class="page-result-icon" :src="bg_image.emptyData"></image>
					<view class="page-result-msg">暂无数据</view>
				</view>
				<uni-load-more v-if="outdoorOrderList.length" :status="outdoorOrderStatus"
					:content-text="outdoorOrderContentText" @clickLoadMore="clickOutdoorOrderLoadMore" />
			</view>
			<view v-show="recordType===2">
				<view v-if="list.length">
					<view class="car-no-panel" v-for="item in list" :key="item.id">
						<view class="title">
							<view class="title-left">
								<image class="icon-car" :src="bg_image.iconCar"></image>
								<text class="car-no-title">{{item.plateNumber || ''}}（{{item.ruleTypeStr || ''}}）</text>
							</view>
						</view>
						<view class="car-info">
							<view class="line">
								<text>车场名称：</text>
								<text class="blue">{{item.parkName || ''}}</text>
							</view>
							<view class="line">
								<text>停车月卡：</text>
								<text>{{item.ruleTypeStr || ''}}</text>
							</view>
							<view class="line between">
								<view>
									<text>支付时间：</text>
									<text>{{item.tradeTime || ''}}</text>
								</view>
								<text class="price">¥{{item.payMoney || 0}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="page-result" v-else>
					<image class="page-result-icon" :src="bg_image.emptyData"></image>
					<view class="page-result-msg">暂无数据</view>
				</view>
				<uni-load-more v-if="list.length" :status="status" :content-text="contentText"
					@clickLoadMore="clickLoadMore" />
			</view>
		</view>
	</view>
</template>

<script>
	import payRecords from './js/payRecords'
	
	import uniLoadMore from './components/uni-load-more/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
		   uniLoadMore
		},
		...payRecords
	}
</script>

<style lang="less" scoped>
	@import url('./css/payRecords.less');
</style>